<template>
    <div class="box" :style="{minHeight:height}">
        <el-table
                :data="tableData"
                style="width: 100%"
                :border="border">
            <el-table-column
                    v-for="(item, index) in tableLabel"
                    :key="index"
                    align="center"
                    :label="item.label">
                <template slot-scope="scope">
                    <span v-if="item.mdyMoney">
                        <el-button type="text" @click="$emit(item.methodName,scope.row)">{{scope.row[item.prop]}}</el-button>
                    </span>
                    <el-button
                            v-else-if="item.detail"
                            type="text"
                            @click="$emit(item.methodName, item.key, scope.row)"
                    >
                        {{item.btnText ? item.btnText :scope.row[item.prop]}}
                    </el-button>
                    <!-- 转盘列表 -->
                    <!-- 领取方式 -->
                    <template slot-scope="scope" v-else-if="item.mode">
                        {{scope.row[item.prop] == 1 ? '到店领取' : '邮寄到家'}}
                    </template>
                    <!-- 图片展示 -->
                    <template slot-scope="scope" v-else-if="item.image">
                        <img :src="scope.row[item.prop]" :alt="ImgText" style="max-width:60px;cursor:pointer;">
                    </template>
                    <!-- 操作 -->
                    <template v-else-if="item.operate">
                        <el-button type="text" @click="$emit('handleModify',scope.row[item.prop])">修改</el-button>
                        <el-button type="text" style="color:#ff5857;" @click="$emit('handleRemove',scope.row[item.prop])">删除</el-button>
                    </template>
                    <!-- 推荐人 -->
                    <template v-else-if="item.referee">
                        <el-button type="text" v-if="scope.row[item.prop] === 1" @click="$emit('handleCheckReferee',scope.row['detail'])">查看</el-button>
                        <el-button type="text" v-else-if="scope.row[item.prop] === 2" @click="$emit('handleReferee',scope.row)">设置</el-button>
                    </template>
                    <!-- 保险服务 -->
                    <!--  保险公司列表 -->
                    <template v-else-if="item.operation">
                        <el-button type="text" @click="$emit('handleCompany',2,scope.row)">修改</el-button>
                        <el-button type="text" @click="$emit('handleCompany',3,scope.row)">删除</el-button>
                    </template>
                    <!-- 强制不换行 -->
                    <template slot-scope="scope" v-else-if="item.nowrap">
                        <el-popover
                                placement="left-start"
                                title="取消理由"
                                width="200"
                                trigger="hover"
                                :content="scope.row[item.prop]">
                            <el-button type='text' slot="reference" class="nowrap">{{scope.row[item.prop]}}</el-button>
                        </el-popover>
                    </template>
                    <!-- 审核记录》业务》主题活动》致敬老兵》公益金管理员申请 》婚否判断 -->
                    <template slot-scope="scope" v-else-if="item.merriage">
                        {{scope.row[item.prop] ? '已婚' : '未婚'}}
                    </template>
                    <!-- 审核管理》业务》邦保养》车主》 通过 驳回操作 -->
                    <template slot-scope="scope" v-else-if="item.ownerThroughReject">
                        <el-button type="text" @click="$emit('through', scope.row)">通过</el-button>
                        <el-button type="text" @click="$emit('reject', scope.row)">驳回</el-button>
                    </template>
                    <!-- 审核管理》业务》邦保养》车主》设备邮寄》收货地址 -->
                    <template v-else-if="item.detailAddress">
                        <el-popover
                                placement="left-start"
                                title="收货地址"
                                width="200"
                                trigger="hover"
                                :content="scope.row['address'] + scope.row['details']">
                            <el-button type='text' slot="reference" class="nowrap">{{scope.row['address']}}</el-button>
                        </el-popover>
                    </template>
                    <!-- 审核管理》业务》邦保养》车主》设备邮寄》导出状态 -->
                    <template slot-scope="scope" v-else-if="item.showText">
                        {{item.btnText}}
                    </template>
                    <template slot-scope="scope" v-else-if="item.empty">
                        {{scope.row[item.prop] || '无'}}
                    </template>
                    <span v-else>{{scope.row[item.prop]}}</span>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="pagination">
            <el-pagination
                    :page-sizes="pageSizes"
                    :current-page.sync='currentPage'
                    :page-size.sync="curPageSize"
                    layout="sizes, prev, pager, next, jumper"
                    background
                    style="margin-top:32px;"
                    :page-count="pageCount"
                    :pager-count="overflowNum"
                    v-if="isShowPagination">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import Viewer from 'viewerjs'
    import 'viewerjs/dist/viewer.css';

    export default {
    name: "table",
    props: {
        tableData: {
          type: Array,
          default: () => []
        },
        tableLabel: {
            type: Array,
            default: () => []
        },
        border: {
          type: Boolean,
          default: false
        },
        isShowPagination: {
            type: Boolean,
            default: true
        },
        page: {//当前页
            type:Number,
            default:1
        },
        pageSize: {
            type:Number,
            default:8
        },
        pageCount: {
            type: Number,
            default: 0
        },
        pageSizes: {
            type: Array,
            default: () => [8,10,20,30]
        },
        overflowNum: {
            type: Number,
            default:5
        },
        height: {
            default: '80vh'
        },
        ImgText: {
            default: '奖品图片'
        }
    },
    computed: {
        currentPage: {
            get () {
                return this.page;
            },
            set (val) {
                this.$emit('update:page', val)
            }
        },
        curPageSize: {
            get () {
                return this.pageSize
            },
            set (val) {
                this.$emit('update:pageSize', val)
            }
        }
    },
    mounted () {
        setTimeout(() => {
            const ViewerDom = document.querySelector('.box');
            const viewer = new Viewer(ViewerDom, {

            });
            // ViewerDom.querySelector('img').click()
        },1000)


    }
}
</script>

<style lang="scss" scoped>
    .box {
        position:relative;
        clear: both;
        padding-bottom:50px;
        box-sizing:border-box;
        padding:0 10px;
    }
    .box img {
        width:100px;height:40px;
        vertical-align:middle;
    }
    .pagination {
        position:absolute;
        bottom:0;
    }
    .nowrap {
        width:80px;
        white-space: nowrap;
        text-overflow:ellipsis;
        overflow:hidden;
    }
</style>
